

/**
 * 公共底部导航
 * 
 * 自定义函数命名规则小驼峰
 */
 function fixBottomNav(name = "home") {

    //创建div
    const div = document.createElement('div')
  
    //添加类名
    div.className = `bottom-nav dpflex`;
  
    //添加HTML内容
    div.innerHTML = `
      <a href="./home.html" class="nav-link ${name === 'home' ? 'active' : ''} ">
        <i class="iconfont icon-shouye"></i>
        <span>首页</span>
      </a>
      <a href="./motion-run.html" class="nav-link ${name === 'motion-run' ? 'active' : ''}">
        <i class="iconfont icon-yundong-"></i>
        <span>运动</span>
      </a>
      <a href="./circle-attention.html" class="nav-link ${name === 'circle-attention' ? 'active' : ''}">
        <i class="iconfont icon-quanzi"></i>
        <span>圈子</span>
      </a>
      <a href="./me.html" class="nav-link ${name === 'me' ? 'active' : ''} ">
        <i class="iconfont icon-wode"></i>
        <span>我的</span>
      </a>
    `
  
    //将div追加到body中
    document.body.append(div)
 
  }

  // 圈子头部导航
function heardNavCircle(n) {
  const div = document.createElement('div')
  div.className = 'bg_heard'
  div.innerHTML = `
      <div class="attention_heard">
      <ul class="attention_nav">
          <li class="${n === 'circle-attention' ? 'active' : ''}">
          <a href=" ./circle-attention.html">关注</a>
          </li>
          <li class="${n === 'circle-nearby' ? 'active' : ''}">
          <a href=" ./circle-nearby.html">附近</a>
          </li>
          <li class = "${n === 'circle-collect' ? 'active' : ''}">
              <a href="./circle-collect.html">收藏</a>
          </li>
          <li class = "">
              <a href="#">个人动态</a>
          </li>
      </ul>
      <div class="circle-add">
          <a href="./circle-add.html"> 添加 +
          </a>
      </div>
</div>
  
  `
  document.body.prepend(div)
}
  
  //导出对象 暴露对象
module.exports = {
    fixBottomNav,
    heardNavCircle
  }